<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轱辘</title>
  </head>
  <body>
    <div id="app">
      <!-- <div class="wrapper">
        <g-button icon="download" :loading="loading" @click="loading = !loading">
          点击我
        </g-button>
        <g-button-group>
          <g-button icon="left">上一页</g-button>
          <g-button icon="download">
            下载
          </g-button>
          <g-button icon="right" icon-position="right">下一页</g-button>
        </g-button-group>
      </div>

      <div class="wrapper input-demo">
        <g-input value="11"></g-input>
        <g-input disabled value="22"></g-input>
        <g-input readonly value="33"></g-input>
        <g-input error="输入错误" value="44"></g-input>
      </div>

      <div class="wrapper grid-demo">
        <div class="tips">基础布局</div>

        <g-row>
          <g-col>1</g-col>
          <g-col>2</g-col>
        </g-row>
        <g-row>
          <g-col>1</g-col>
          <g-col>2</g-col>
          <g-col>3</g-col>
        </g-row>

        <div class="tips" tips="分栏间隔">分栏间隔</div>

        <g-row :gutter="20">
          <g-col :span="2">1</g-col>
          <g-col :span="4">2</g-col>
          <g-col :span="6">3</g-col>
          <g-col :span="8">4</g-col>
        </g-row>

        <div class="tips">分栏偏移</div>

        <g-row>
          <g-col :span="2">1</g-col>
          <g-col :offset="4" :span="2">2</g-col>
          <g-col :offset="6" :span="8">10</g-col>
        </g-row>
      </div>

      <div class="wrapper gird-demo2">
        <div class="tips">对齐方式</div>

        <g-row :gutter="20" align="middle" justify="space-between">
          <g-col :span="3">
            <div class="view">1</div>
          </g-col>
          <g-col :span="4" :offset="2">
            <div class="view" style="height: 80px;">2</div>
          </g-col>
          <g-col :span="4" :offset="2">
            <div class="view">3</div>
          </g-col>
          <g-col :span="3" :offset="2">
            <div class="view" style="height: 60px;">4</div>
          </g-col>
        </g-row>

        <div class="tips">响应式布局</div>

        <g-row :gutter="20">
          <g-col
            span="2"
            :ipad="{span: 8}"
            :narrow-pc="{span: 4}"
            :pc="{span: 2}"
            :wide-pc="{span: 1}"
          >
            <div class="view">2</div>
          </g-col>
          <g-col
            span="22"
            :ipad="{span: 16}"
            :narrow-pc="{span: 20}"
            :pc="{span: 22}"
            :wide-pc="{span: 23}"
          >
            <div class="view">20</div>
          </g-col>
        </g-row>

        <div class="tips">响应式布局2</div>

        <g-row :gutter="20">
          <g-col span="24" :ipad="{span: 12}" :narrow-pc="{span: 8}">
            <div class="view">1</div>
          </g-col>
          <g-col span="24" :ipad="{span: 12}" :narrow-pc="{span: 8}">
            <div class="view">2</div>
          </g-col>
          <g-col span="24" :ipad="{span: 12}" :narrow-pc="{span: 8}">
            <div class="view">3</div>
          </g-col>
        </g-row>
      </div>

      <div class="wrapper layout-demo">
        <div class="tips">Layout-1</div>
        <g-layout>
          <g-header>Header</g-header>
          <g-content>Content</g-content>
          <g-footer>Footer</g-footer>
        </g-layout>

        <div class="tips">Layout-2</div>
        <g-layout>
          <g-header>Header</g-header>
          <g-layout>
            <g-sider>Sider</g-sider>
            <g-content>Content</g-content>
          </g-layout>
          <g-footer>Footer</g-footer>
        </g-layout>

        <div class="tips">Layout-3</div>
        <g-layout>
          <g-header>Header</g-header>
          <g-layout>
            <g-content>Content</g-content>
            <g-sider>Sider</g-sider>
          </g-layout>
          <g-footer>Footer</g-footer>
        </g-layout>

        <div class="tips">Layout-4</div>
        <g-layout>
          <g-sider>Sider</g-sider>
          <g-layout>
            <g-header>Header</g-header>
            <g-content>Content</g-content>
            <g-footer>Footer</g-footer>
          </g-layout>
        </g-layout>
      </div>

      <div class="wrapper">
        <div class="tips">Toast 组件</div>
        <g-button @click="handleToast('top')">文字提示 居上</g-button>
        <g-button @click="handleToast('middle')">文字提示 居中</g-button>
        <g-button @click="handleToast('bottom')">文字提示 居下</g-button>
      </div>

      <div class="wrapper">
        <div class="tips">Tabs 切换</div>
        <g-tabs v-model="selectedTab" @tab-click="tabsClick">
          <g-tabs-head>
            <template slot="actions">
              <g-button>设置</g-button>
            </template>
            <g-tabs-item name="1">美女</g-tabs-item>
            <g-tabs-item name="2">财经</g-tabs-item>
            <g-tabs-item name="3">体育</g-tabs-item>
            <g-tabs-item name="4" disabled>视频</g-tabs-item>
            <g-tabs-item name="5">
              <g-icon name="setting"></g-icon>
              设置
            </g-tabs-item>
          </g-tabs-head>
          <g-tabs-body>
            <g-tabs-pane name="1">美女相关咨询</g-tabs-pane>
            <g-tabs-pane name="2">财经相关咨询</g-tabs-pane>
            <g-tabs-pane name="3">体育相关咨询</g-tabs-pane>
            <g-tabs-pane name="4">视频相关咨询</g-tabs-pane>
            <g-tabs-pane name="4">设置</g-tabs-pane>
          </g-tabs-body>
        </g-tabs>
      </div> -->

      <div class="wrapper">
        <div class="tips">Popover 组件</div>
        <div style="padding: 10px 0;" >
          <g-popover>
            <template slot="content">
              顶部弹出内容
            </template>
            <g-button>点我顶部弹出</g-button>
          </g-popover>
          <g-popover position="bottom">
            <template slot="content">
              <g-button>底部弹出内容</g-button>
            </template>
            <g-button>点我底部弹出</g-button>
          </g-popover>
          <g-popover position="left">
            <template slot="content">
              <g-button>左侧弹出内容</g-button>
            </template>
            <g-button>点我左侧弹出</g-button>
          </g-popover>
          <g-popover position="right">
            <template slot="content">
              <g-button>右侧弹出内容</g-button>
            </template>
            <g-button>点我右侧弹出</g-button>
          </g-popover>
        </div>
        <div class="tips">Popover组件 hover触发方式</div>
        <div style="padding: 10px 0;">
          <g-popover trigger="hover">
            <template slot="content">
              顶部弹出内容
            </template>
            <g-button>点我顶部弹出</g-button>
          </g-popover>
          <g-popover position="bottom" trigger="hover">
            <template slot="content">
              <g-button>底部弹出内容</g-button>
            </template>
            <g-button>点我底部弹出</g-button>
          </g-popover>
          <g-popover position="left" trigger="hover">
            <template slot="content">
              <g-button>左侧弹出内容</g-button>
            </template>
            <g-button>点我左侧弹出</g-button>
          </g-popover>
          <g-popover position="right" trigger="hover">
            <template slot="content">
              <g-button>右侧弹出内容</g-button>
            </template>
            <g-button>点我右侧弹出</g-button>
          </g-popover>
        </div>
        </div>
      </div>
    </div>

    <script src="./src/app.js"></script>
  </body>
</html>
